<template>
	<view class="pages">
		<view class="box">
			<view class="pf flex">
				<view class="flex">
					<text style="margin-right: 20rpx;">商品评价</text> <uni-rate  v-model="score"  activeColor="#F93A59" :size="28"/>
				</view>
				<text>{{score | scorestue}}</text>
			</view>
			<view style="width: 100%;margin-top: 20rpx;">
				<textarea v-model="content" placeholder="20字评价+1张图片，奖励200积分；60字评价+3张图片，奖励500积分。" 
				style="font-size: 28rpx;line-height: 45rpx;height: 400rpx;"></textarea>
				<view class="">
					<text  style="font-weight: bold;font-size: 28rpx;color: #aaa;margin-right: 5rpx;">{{content.length}}</text> / 
					<text style="font-weight: bold;font-size: 28rpx;color: #277EEF;margin-left: 5rpx;">60</text>
				</view>
			</view>
		</view>
		 
		<view class="upimage">		 
			<view class="up3">
				<view class="img" v-for="(item,index) in imgArr" :key="index">
					<image :src="item" class="image" mode="aspectFill" @click="lookImg(index)"></image>
					 
					<view class="del">
						<u-icon slot="right" name="close" @click="delimg(index)" size="14"></u-icon>
						
					</view> 
				</view>
				<view class="add" @click="addimage()" v-if="imgArr.length<=6">
					<image src="/static/camera.png" mode="widthFix"></image>
					<view class="">请上传</view>
				</view>
			</view>			
		</view>
		<view style="font-weight: 400;font-size: 24rpx;color: #AAAAAA;text-align: center;">
			您的评价内容在商品评论页面将会被匿名展示
		</view>
		<view class="footer">
			<view class="woodsbtn" @click="up" style="background-color: #277EEF;">
				确认提交
			</view>
		</view>
		
	</view>
</template>

<script>
	import pro from "@/utils/uploadImg.js"
	import {createcommentAPI} from "@/api/user.js"
	export default {
		data() {
			return {
				score:5,
				content:'',
				imgArr:[
					
				],
				id:""
			}
		},
		onLoad(option) {
			this.id=option.id
		},
		filters:{
			scorestue(score){
				if (score==1) {
					return "非常差"
				} else if(score==2){
					return "差"
				}else if(score==3){
					return "一般"
				}else if(score==4){
					return "好"
				}else if(score==5){
					return "非常好"
				}else{
					return ""
				}
				 
			}
		},
		methods: {
			up(){
				var data={
					scores:this.score,
					content:this.content,
					orderId:this.id,
					picUrls:this.imgArr.join(",")
				}
				console.log(data)
				createcommentAPI(data).then(res=>{
					uni.showToast({
						title:"已提交评价"
					})
					
					let pages = getCurrentPages(); // 当前页面
					let beforePage = pages[pages.length - 2];
					setTimeout(()=>{
						uni.navigateBack({
							 
						})
					},1000)
				})
			},
			lookImg(val){
				const urls = this.imgArr
				const current = val
				uni.previewImage({
					urls,
					current
				})
			},
			delimg(i){
				this.imgArr.splice(i,1);			
			},
			addimage(){
				if(this.imgArr.length<=6){
					var num=6-this.imgArr.length
					pro.choose_and_upload(num).then(res=>{
						console.log(res.img_urls)
						this.imgArr=this.imgArr.concat(res.img_urls)
					})
				}else{
					uni.showToast({
						title: '至多上传6张图片',
						duration: 2000,
						icon:"none"
					});
				}	
			}
		}
	}
</script>

<style scoped lang="scss">
.pages{
	padding: 30rpx;
	min-height: 100vh;
	background-color: #F8F8F8;
	.box{
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		.pf{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #EEEEEE;
			font-weight: bold;
			
		}
	}
	
	.upimage{
		margin-top: 20rpx;
		 
		 
		.up3{
			margin:10rpx 0;
			display: flex;
			align-items: center;
			flex-wrap: wrap;	
			.img{
				width: 210rpx;
				height: 210rpx;
				margin:10rpx 10rpx;
				  
				position: relative;
				.image{
					width: 210rpx;
					height: 210rpx;
					border-radius: 8px;
				}
				.del{
					position: absolute;
					top: -8rpx;
					right: -8rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}
			.add{
				width: 210rpx;
				height: 210rpx;
				background: #fff;
				border-radius: 8px;
				margin:10rpx 10rpx;
				 
				border: 1px dashed #c2c6d1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				image{
					width: 70rpx;
					height: 70rpx;
				}
				view{
					color: #333;
					 
					text-align: center;
					font-weight: bold;
					font-size: 32rpx;
				}
			}
		}
	}
	
}
</style>
